<template>
	<view>
		<cu-custom :bgColor="NavBarColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">定位</block>
		</cu-custom>

		<view class="container">
			<!-- 地图组件 -->
			<map 
				id="myMap"
				style="width: 100%; height: 70vh;" 
				:latitude="latitude" 
				:longitude="longitude" 
				:markers="markers"
				:scale="scale"
				@regionchange="onRegionChange"
			></map>
			<!-- 获取当前位置按钮 -->
			<button @click="getCurrentLocation" type="primary" class="btn">获取当前位置</button>
			<!-- 显示中文地址信息 -->
			<view class="address-info" v-if="address">{{ address }}</view>
		</view>
	</view>
</template>

<script>
export default {
    data() {
        return {
            latitude: 39.9042, // 默认纬度
            longitude: 116.4074, // 默认经度
            scale: 16, // 地图缩放级别
            markers: [], // 地图标记点
            address: '' // 中文地址信息
        };
    },
    methods: {
        // 获取当前位置信息
        getCurrentLocation() {
            uni.getLocation({
                type: 'gcj02',
                success: (res) => {
                    this.latitude = res.latitude;
                    this.longitude = res.longitude;
                    // 设置标记点
                    this.markers = [{
                        id: 0,
                        latitude: this.latitude,
                        longitude: this.longitude,
                        title: '当前位置',
                        iconPath: '/static/location.png', // 自定义标记图标
						rotate:0,   // 旋转度数
					 　　width:15,   //宽
					 　　height:15,   //高
					　　 title:'你在哪了,OK',//标注点名
					　　 alpha:0.8,   //透明度
                    }];
                    // 获取中文地址信息
                    this.getAddress(this.latitude, this.longitude);
                },
                fail: (err) => {
                    console.error('获取位置失败', err);
                    uni.showToast({
                        title: '获取位置失败，请检查权限',
                        icon: 'none'
                    });
                }
            });
        },
        // 根据经纬度获取中文地址
        getAddress(latitude, longitude) {
			console.log("111111")
			                // WeChat Mini - Program environment
			                wx.getReverseGeocoder({
			                    latitude,
			                    longitude,
			                    success: (res) => {
									console.log(res)
			                        this.address = res.result.address;
			                    },
			                    fail: (err) => {
			                        console.error('Failed to get address information', err);
			                        uni.showToast({
			                            title: 'Failed to get address information',
			                            icon: 'none'
			                        });
			                    }
			                });
							wx.chooseAddress({
							  success (res) {
							    console.log(res.userName)
							    console.log(res.postalCode)
							    console.log(res.provinceName)
							    console.log(res.cityName)
							    console.log(res.countyName)
							    console.log(res.detailInfo)
							    console.log(res.nationalCode)
							    console.log(res.telNumber)
							  }
							})
            // uni.getReverseGeocoder({
            //     latitude,
            //     longitude,
            //     success: (res) => {
            //         this.address = res.address;
            //     },
            //     fail: (err) => {
            //         console.error('获取地址信息失败', err);
            //         uni.showToast({
            //             title: '获取地址信息失败',
            //             icon: 'none'
            //         });
            //     }
            // });
        },
        // 地图区域变化时触发
        onRegionChange(e) {
			console.log("....."+ e)
            if (e.type === 'end') {
				
                this.latitude = e.centerLocation.latitude;
                this.longitude = e.centerLocation.longitude;
                // 可选择在地图区域变化结束后更新中文地址
                // this.getAddress(this.latitude, this.longitude);
            }
        }
    }
};
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.btn {
    margin: 20rpx;
}
.address-info {
    padding: 20rpx;
    text-align: center;
    font-size: 28rpx;
    color: #333;
}
</style>